<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div class="digest mystory ff">
       <h1 title="我的-故事">我的故事</h1>
       <h1 title="我的故事副标题">---我的青春岁月</h1>
       <p>第一段正文</p>
       <p>第二段正文</p>
       <p title="故事第三段">第三段正文</p>
   </div> 
   <!--存在判断-->
   <style>
       /*h1[title="我的-故事"]{color: aquamarine;}*/
       h1[title|="我的"]{color: brown;}
       [class~="mystory"]{border: 1px green dashed;}
   </style>
   <!--子串匹配-->
   <style>
       /*"^"表示以某个字符开头*/
       [title^="故事"]{color: blue;}
       /*"$"表示以某个字符结尾*/
       [title$="故事"]{color:blueviolet;}
       /*"*"表示以某个字符在任意位置*/
       [title*="故事"]{color:rgb(232, 180, 57);}
   </style>
</body>
</html>